<template>
    <CommonCard title="全部用户" :value="numberFormat(userToal)">
        <div ref="barChartRef" style="width:100%;height: 100%;"></div>
        <template #footer>
            <div class="footer">
                <span>日同比</span>&nbsp;
                <span class="emphasis">{{ numberFormat(userGrowthLastDay) }}%</span>&nbsp;
                <span class="increment"></span>&nbsp;&nbsp;&nbsp;
                <span>月同比</span>&nbsp;
                <span class="emphasis">{{ numberFormat(userGrowthLastMonth) }}%</span>&nbsp;
                <span class="decrement"></span>
            </div>
        </template>
    </CommonCard>
</template>
   
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
    name: 'TotalUsers'
});
</script>
<script lang="ts" setup>
import CommonCard from './CommonCard.vue';
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
import { computed, watch } from 'vue'

//store数据
const reportDataStore = useReportDataStore()
//格式化数据方法
const { numberFormat, moneyFormat } = useFormat()
//累计用户数
const userToal = computed(() => reportDataStore.reportData.usersTotal)
//上月用户数
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth)
//日同比
const userGrowthLastDay = computed(() => reportDataStore.reportData.userGrowthLastDay)
//月同比
const userGrowthLastMonth = computed(() => reportDataStore.reportData.userGrowthLastMonth)

const barChartRef = ref();
let barChart: EChartsType;
const getOption = () => {
    return {
        xAxis: {
            boundaryGap: false, // 左右两侧不留白
            show: false,
            min: 0,
            max: userToal.value
        },
        grid: {
            left: 0,
            right: 0
        },
        yAxis: {
            show: false,
            data: ['AAA']
        },
        tooltip: {},
        series: {
            type: 'bar',
            // 设置柱条的宽度
            barWidth: 10,
            showBackground: true,
            itemStyle: {
                color: 'orangered'
            },
            label: {
                show: true,
                formatter: '|',
                position: 'right',
                color: 'red'
            },
            data: [(userToal.value as number) - (usersLastMonth.value as number)]
        }
    }
}

onMounted(() => {
    barChart = echarts.init(barChartRef.value)
    barChart && barChart.setOption(getOption())
    window.addEventListener('resize', () => {
        barChart && barChart.resize()
    })
})

watch(userToal, () => {
    barChart && barChart.setOption(getOption())
})

</script>
   
<style scoped></style>